<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <template #title>
            <team-outlined />
            <span>总用户数</span>
          </template>
          <div class="card-content">
            <h2>1,234</h2>
            <p>较昨日 <span class="up">+12</span></p>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <rise-outlined />
            <span>今日活跃</span>
          </template>
          <div class="card-content">
            <h2>423</h2>
            <p>较昨日 <span class="up">+8</span></p>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <fund-outlined />
            <span>系统负载</span>
          </template>
          <div class="card-content">
            <h2>65%</h2>
            <p>较昨日 <span class="down">-5%</span></p>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <template #title>
            <alert-outlined />
            <span>告警数量</span>
          </template>
          <div class="card-content">
            <h2>3</h2>
            <p>较昨日 <span class="down">-2</span></p>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="最近活动">
          <a-timeline>
            <a-timeline-item v-for="(item, index) in activities" :key="index">
              {{ item.content }}
              <template #dot>
                <a-badge :status="item.type" />
              </template>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="系统公告">
          <a-list :data-source="notices" :pagination="{ pageSize: 5 }">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :title="item.title">
                  <template #description>
                    {{ item.date }}
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, onUnmounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  TeamOutlined,
  RiseOutlined,
  FundOutlined,
  AlertOutlined
} from '@ant-design/icons-vue'

// 注入事件总线
const emitter = inject('emitter')

// 处理来自聊天组件的消息
const handlePageAction = (action) => {
  if (action.type === 'chat-command') {
    const message = action.data
    message.content = message.content.toLowerCase()
    
    // 根据聊天内容执行不同操作
    if (message.content.includes('刷新') || message.content.includes('更新数据')) {
      message.success('正在刷新数据...')
      // 模拟数据刷新
      setTimeout(() => {
        activities.value.unshift({
          content: '数据已刷新',
          type: 'success',
          time: formatTime()
        })
      }, 500)
    }
  }
}

// 格式化时间
const formatTime = () => {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

// 组件挂载时添加事件监听
onMounted(() => {
  emitter.on('page-action', handlePageAction)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  emitter.off('page-action', handlePageAction)
})

const activities = ref([
  { content: '管理员更新了系统配置', type: 'processing', time: '10分钟前' },
  { content: '新用户注册: user123', type: 'success', time: '30分钟前' },
  { content: '系统备份完成', type: 'success', time: '1小时前' },
  { content: '检测到异常登录', type: 'error', time: '2小时前' }
])

const notices = ref([
  { title: '系统维护通知', date: '2023-09-01' },
  { title: '新功能发布公告', date: '2023-08-30' },
  { title: '安全更新提醒', date: '2023-08-28' },
  { title: '用户反馈处理公告', date: '2023-08-25' },
  { title: '系统优化通知', date: '2023-08-20' }
])
</script>

<style lang="less" scoped>
.dashboard-container {
  .card-content {
    text-align: center;
    
    h2 {
      font-size: 28px;
      margin: 0;
    }

    p {
      margin: 8px 0 0;
      color: rgba(0, 0, 0, 0.45);
    }

    .up {
      color: #52c41a;
    }

    .down {
      color: #ff4d4f;
    }
  }

  :deep(.ant-card-head-title) {
    .anticon {
      margin-right: 8px;
    }
  }
}
</style>